<nz-card [nzExtra]="extraTpl" [nzTitle]="title">
    <ng-template #extraTpl>
        <button nz-button (click)="refresh()">
            <!-- <i class="anticon anticon-reload"></i> -->刷新
        </button>

        <button nz-button (click)="create()" nzType="primary">
            <i nz-icon nzType="plus" theme="outline"></i>新增
        </button>
    </ng-template>
    <ng-template #title>
        <nz-input-group nzSearch [nzAddOnAfter]="suffixButton" style="width: 30%;">
            <input type="text" name="filterText" [(ngModel)]="keyWord" nz-input placeholder="请输入用户名、账户名或Email"
                (keyup)="enterEvent($event)" />
        </nz-input-group>
    </ng-template>
    <ng-template #suffixButton>
        <button nz-button nzType="primary" (click)="refresh()" nzSearch>查询</button>
    </ng-template>
    <ng-template #totalContentMe>共{{totalItems}}条</ng-template>
    <nz-table #ajaxTable nzShowSizeChanger [nzData]="dataList" [nzTotal]="totalItems" [(nzPageIndex)]="pageNumber"
        [(nzPageSize)]="pageSize" [nzLoading]="isTableLoading" [nzShowTotal]="totalContentMe"
        (nzPageIndexChange)="refresh()" (nzPageSizeChange)="refresh()" [nzFrontPagination]="false">
        <thead>
            <tr>
                <th>头像</th>
                <th>账号</th>
                <th>用户名</th>
                <th>Email</th>
                <th>角色</th>
                <th>账号状态</th>
                <th>是否启用</th>
                <th>创建时间</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let item of ajaxTable.data; let irow = index">
                <td>
                    <nz-avatar [nzShape]="'square'" [nzSrc]="item.avatar | hostUrl" [nzSize]="'large'"></nz-avatar>
                </td>
                <td>{{ item.userName }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.emailAddress }}</td>
                <td [title]="item.roleString">{{ item.roleString|lengthLimit:10}}</td>
                <td *ngIf="!item.lockoutEndDateUtc" style="color: green;">
                    正常
                </td>
                <td *ngIf="item.lockoutEndDateUtc" style="color:red;">
                    已锁
                </td>
                <td>
                    <nz-badge *ngIf="item.isActive" [nzStatus]="'success'" [nzText]="'是'"></nz-badge>
                    <nz-badge *ngIf="!item.isActive" [nzStatus]="'default'" [nzText]="'否'"></nz-badge>
                </td>
                <td>{{ item.creationTime | _date: 'yyyy-MM-dd' }}</td>
                <td>
                    <a (click)="edit(item)">编辑</a>
                    <nz-divider nzType="vertical"></nz-divider>
                    <a style="color:#589b97;" (click)="unlock(item)">解锁</a>
                    <nz-divider nzType="vertical"></nz-divider>
                    <!-- <a style="color:#ff4d4f;" (click)="delete(item)">删除</a> -->
                    <nz-popconfirm (nzOnConfirm)="delete(item)" [nzTitle]="'是否删除该用户？'">
                        <a style="color: red;" nz-popconfirm>删除</a>
                    </nz-popconfirm>
                </td>
            </tr>
        </tbody>
    </nz-table>
</nz-card>